<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户登录</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/static/superui/content/ui/global/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/static/superui/content/ui/global/font-awesome/css/font-awesome.css" />
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/superui/content/adminlte/dist/css/AdminLTE.css">
    <link rel="stylesheet" href="/static/superui/content/adminlte/dist/css/skins/_all-skins.css">
    <link rel="stylesheet" href="/static/plugins/bootstrapvalidator/dist/css/bootstrapValidator.css"/>
    <link rel="stylesheet" href="/static/css/main.css">
</head>

<body class="hold-transition login-page">
<div class="login-box" id="app" v-cloak>
    <div class="login-logo">
        <b>智能快速开发系统</b>
    </div>
        <!-- /.login-logo -->
        <div class="login-box-body" id="loginForm">
            <p class="login-box-msg">系统登录</p>
            <div v-if="error" class="alert alert-danger alert-dismissible">
                <h4 style="margin-bottom: 0px;"><i class="fa fa-exclamation-triangle"></i> {{errorMsg}}</h4>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" id="username" name="username" v-model="username" placeholder="账号">
                <!--<span class="glyphicon glyphicon-user form-control-feedback"></span>-->
                <span class="glyphicon form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" name="password" v-model="password"  placeholder="密码">
                <span class="glyphicon form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <input type="text" class="form-control" name="captcha" v-model="captcha" @keyup.enter="login" placeholder="验证码">
                <span class="glyphicon form-control-feedback"></span>
            </div>
            <div class="form-group has-feedback">
                <img alt="如果看不清楚，请单击图片刷新！" :src="src" @click="refreshCode" class="pointer">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:;" @click="refreshCode">点击刷新</a>
            </div>

            <div class="row">
                <div class="col-xs-8">
                    <div class="checkbox icheck">
                    </div>
                </div>
                <!-- /.col -->
                <div class="col-xs-4">
                    <button type="button" class="btn btn-primary btn-block btn-flat" id="btnLogin" @click="login">登录</button>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.social-auth-links -->
        </div>
        <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
</body>

<script src="/static/superui/content/ui/global/jQuery/jquery.min.js"></script>
<script src="/static/superui/content/adminlte/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/superui/content/ui/global/layer/layer.js"></script>
<script type="text/javascript" src="/static/plugins/bootstrapvalidator/dist/js/bootstrapValidator.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/static/superui/content/ui/global/slimScroll/jquery.slimscroll.min.js"></script>
<script src="/static/superui/content/ui/global/fastclick/fastclick.min.js"></script>
<script src="/static/superui/content/adminlte/dist/js/app.js"></script>
<!--引入Vue-->
<script src="/static/js/vue.js"></script>
<!--RSA加密工具-->
<script src="/static/plugins/security/security.js"></script>
<!--AES加密工具-->
<script src="static/plugins/cryptoJs/rollups/aes.js"></script>
<script src="static/plugins/cryptoJs/components/mode-ecb.js"></script>
<script src="static/js/common.js"></script>
<script type="text/javascript">
    $(function(){
        $("#username").focus();
        $('#loginForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: 'The username is not valid',
                    validators: {
                        notEmpty: {
                            message: '请输入登录用户名'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '请输入登录密码'
                        }
                    }
                },
                captcha: {
                    validators: {
                        notEmpty: {
                            message: '请输入验证码'
                        }
                    }
                }
            }
        });
    });

    var vm = new Vue({
        el:'#app',
        data:{
            username: '',
            password: '',
            captcha: '',
            error: false,
            errorMsg: '',
            src:baseURL+'/captcha.jpg'
        },
        beforeCreate: function(){
            if(self != top){
                top.location.href = self.location.href;
            }
        },
        methods: {
            //刷新验证码
            refreshCode: function(){
                this.src = baseURL+"/captcha.jpg?t=" + $.now();
            },

            //登录
            login: function (event) {
                //校验表单输入项
                //获取表单对象
                var bootstrapValidator = $('#loginForm').data('bootstrapValidator');
                //手动触发验证
                bootstrapValidator.validate();
                if(!bootstrapValidator.isValid()){
                    $("#username").focus();
                    //表单提交的方法、比如ajax提交
                    return;
                }
                //var data = "username="+vm.username+"&password="+vm.password+"&captcha="+vm.captcha;
                //以对象的方式组装参数
                var data = {};
                data.username = vm.username;
                data.password = vm.password;
                data.captcha = vm.captcha;
                //使用jquery发起ajax请求
                $.ajax({
                    type: "POST",
                    url: baseURL+"/sys/login",
                    data: data,//需要传递到服务端的参数
                    success: function(r){
                        if(r.code == 0){//登录成功
                            //将登录token存放到localStorage
                            localStorage.setItem("token", r.token);
                            parent.location.href ='index.html';
                        }else{
                            vm.error = true;
                            vm.errorMsg = r.msg;
                            vm.refreshCode();
                        }
                    }
                });
            }
        }
    });
</script>
</html>